<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>规则详情</title>
    <!--/* 加载全局样式 */-->
    <th:block th:replace="common/thinDecorator::globalStyle"></th:block>
    <!--/* 加载全局主题样式 */-->
    <th:block th:replace="common/thinDecorator::globalThemeStyle"></th:block>
    <!--/* 加载全局布局样式 */-->
    <th:block th:replace="common/thinDecorator::globalLayoutStyle"></th:block>
    <!--Axios请求-->
    <script th:src="@{/Vue/axios.min.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body class="page-content-white page-container-bg-solid page-content-form material-blue" style="overflow-x: hidden;">
<div class="page-wrapper">
    <div class="page-container">
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light">
                            <div class="portlet-title">
                                <div class="caption font-blue">
                                    <i class="fa font-blue"></i>数据质量标准规则-> <span
                                        th:text="${dataInfo.getId()==null?'新增':'修改'}"></span>
                                </div>
                            </div>
                            <div class="portlet-body form">
                                <form id="form" class="horizontal-form" method="post" th:object="${dataInfo}">
                                    <input type="hidden" name="id" id="id" th:value="*{id}"/>
                                    <input type="hidden" name="createTime" id="createTime" th:value="*{createTime}"/>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-12">
                                                <label style="font-size: 17px">基本信息</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">规则名称<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <input type="text" class="form-control" placeholder="规则名称"
                                                       required maxlength="20" name="ruleName"
                                                       th:value="*{ruleName}" style="width: 100%">
                                            </div>
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">规则类型<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <select class="form-control"
                                                        name="ruleType" th:field="*{ruleType}"
                                                        style="width: 100%; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 30px;">
                                                    <option value="">请选择规则类型</option>
                                                    <option value="单表校验">单表校验</option>
                                                    <option value="单指标校验">单指标校验</option>
                                                </select>
                                            </div>
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">规则模板<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <select class="form-control" id="ruleTemplate"
                                                        name="ruleTemplateId" th:field="*{ruleTemplateId}"
                                                        onchange="selectRuleType('ruleTemplate')"
                                                        style="width: 100%; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 30px;">
                                                    <option value="">请选择模板</option>
                                                    <option th:each="ruleType:${ruleTypeList}"
                                                            th:value="${ruleType.getId()}"
                                                            th:text="${ruleType.getModelName()}"></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">规则详情<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-11">
                                                <input name="ruleDetail" class="form-control"
                                                       th:value="*{ruleDetail}" prompt="规则详情"
                                                       style="width:100%">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-12">
                                                <label style="font-size: 17px">数据源</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">数据源<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <select class="form-control" id="clusterType"
                                                        name="dataSourceEngine" th:field="*{dataSourceEngine}"
                                                        onchange="selectClusterType('clusterType')"
                                                        style="width: 100%; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 30px;">
                                                    <option value="">请选择计算引擎</option>
                                                    <option th:each="cluster:${allCluster}"
                                                            th:value="${cluster.getClusterName()}"
                                                            th:text="${cluster.getClusterName()}"></option>
                                                </select>
                                            </div>
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">数据库名<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <select class="form-control" id="dbType"
                                                        name="databaseName" th:field="*{databaseName}"
                                                        onchange="selectDbType('dbType')"
                                                        style="width: 100%; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 30px;">
                                                    <option value="">请选择数据库</option>
                                                    <option th:each="dbInfo:${allHiveDbInfo}"
                                                            th:value="${dbInfo.getDbName()}"
                                                            th:text="${dbInfo.getDbName()}"></option>
                                                </select>
                                            </div>
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">数据表名<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <select class="form-control" id="tableType"
                                                        name="tableName" th:field="*{tableName}"
                                                        onchange="selectTableType('tableType')"
                                                        style="width: 100%; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 30px;">
                                                    <option value="">请选择表</option>
                                                    <option th:each="thatTable:${allTableList}"
                                                            th:value="${thatTable.getTableName()}"
                                                            th:text="${thatTable.getTableName()}"></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">表字段<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <select class="form-control" id="colTtype"
                                                        onchange="selectColType('colTtype')"
                                                        name="fieldName" th:field="*{fieldName}"
                                                        style="width: 100%; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 30px;">
                                                    <option value="">请选择字段</option>
                                                    <option th:each="detailCol:${colDetailList}"
                                                            th:value="${detailCol.getFieldName()}"
                                                            th:text="${detailCol.getFieldName()+'('+detailCol.getDataType()+')'}"></option>
                                                </select>
                                            </div>
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label" id="ManySpan"></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-7">
                                                <input name="ManyInput" class="form-control" id="ManyInput"
                                                       style="width:100%;display:none" type="text"
                                                       onchange="changeSqlWhere('ManyInput')">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">过滤条件<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-11">
                                                <input name="filterCondition" class="form-control" id="sqlWhereId"
                                                       th:value="*{filterCondition}" prompt="过滤条件"
                                                       style="width:100%" onchange="changeSqlWhere('sqlWhereId')">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">SQl预览<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-11">
                                                <input name="sqlPreview" id="sqlPreview" class="form-control"
                                                       th:value="*{sqlPreview}" style="display: none">
                                                <div style="background-color: #f1efef">
                                                    <dl>
                                                        <dd id="showSqlSPL" th:text="*{sqlPreview}">&nbsp;SQl预览</dd>
                                                        <dd>&nbsp;</dd>
                                                        <dd>&nbsp;</dd>
                                                        <dd>&nbsp;</dd>
                                                    </dl>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">&nbsp;</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-11">
                                                <div style="background-color: #f1efef">
                                                    <dl>
                                                        <dd>
                                                            过滤条件说明:可在过滤条件中添加分区变量表达式,用于指定运行时的分区。
                                                        </dd>
                                                        <dd>例子：</dd>
                                                        <dd>
                                                            1.ds=${run_date},表示程序运行时的实际日期前一天，格式为ds=yyyyMMdd；ds=${run_date_std},表示程序运行时的实际日期前一天，格式为ds=yyyy-MM-dd。
                                                        </dd>
                                                        <dd>2.ds=${run_date-N}，表示程序运行时的实际日期前N +
                                                            1天；若今天是20230707，填写了ds=${run_date-2},运行时替换为ds=20230704。
                                                        </dd>
                                                    </dl>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-12">
                                                <label style="font-size: 17px">校验方式</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">校验字段<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <input type="text" id="colCheckMsg" class="form-control"
                                                       placeholder="校验字段"
                                                       required maxlength="20" name="checkFieldMsg"
                                                       th:value="*{checkFieldMsg}" style="width: 100%" readonly>
                                            </div>
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">校验模板<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <select class="form-control"
                                                        name="checkTemplate" th:field="*{checkTemplate}"
                                                        id="checkTemplateId"
                                                        style="width: 100%; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 30px;">
                                                    <option value="">请选择校验模板类型</option>
                                                    <option value="日波动">日波动</option>
                                                    <option value="月波动">月波动</option>
                                                    <option value="周波动">周波动</option>
                                                    <option value="固定值">固定值</option>
                                                    <option value="年环比">年环比</option>
                                                    <option value="日环比">日环比</option>
                                                    <option value="月环比">月环比</option>
                                                </select>
                                            </div>
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">

                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid" id="isFixValueOrFluctuation">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">比较方式<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <select class="form-control"
                                                        name="compareType" th:field="*{compareType}"
                                                        style="width: 100%; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 28px; line-height: 30px;">
                                                    <option value="">请选比较方式</option>
                                                    <option value="大于">大于</option>
                                                    <option value="小于">小于</option>
                                                    <option value="等于">等于</option>
                                                    <option value="不等于">不等于</option>
                                                    <option value="大于等于">大于等于</option>
                                                    <option value="小于等于">小于等于</option>
                                                </select>
                                            </div>
                                            <div class="m-grid-col-right m-grid-col m-grid-col-middle m-grid-col-md-1">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">校验阈值<span
                                                            style="color: red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-3">
                                                <input name="checkThreshold" class="form-control"
                                                       th:value="*{checkThreshold}" prompt="校验阈值"
                                                       style="width:100%">
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-4">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-12">
                                                <label style="font-size: 17px">执行参数</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid">
                                        <div class="m-grid-row">
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-md-12">
                                                <span style="margin-left: 60px">是否剔除失败指标值:</span><input
                                                    name="goRemoveFail" type="checkbox"
                                                    th:attr="checked=*{goRemoveFail}"
                                                    style="margin-left: 10px"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <div class="col-md-offset-5 col-md-12">
                                            <a href="javascript:;" class="btn green" id="submit" th:if="${readOnly==true}">提交</a>
                                            <a href="javascript:back();" class="btn default" th:if="${readOnly==true}">返回</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div id="scripts">
    <!--/* 加载IE8兼容性脚本 */-->
    <th:block th:replace="common/thinDecorator::IE8FixScripts"/>
    <!--/* 加载核心插件脚本 */-->
    <th:block th:replace="common/thinDecorator::corePluginsScripts"/>
    <!--/* 加载全局主题脚本 */-->
    <th:block th:replace="common/thinDecorator::globalThemeScripts"/>
    <!--/* 加载全局布局脚本 */-->
    <th:block th:replace="common/thinDecorator::globalLayoutScripts"/>
    <th:block th:replace="common/thinDecorator::globalsetupScripts"/>
    <script th:inline="javascript">
        var backUrl = "/qa/ruleManager/list_new";
        $(function () {
            $("#form").form({
                url: "/qa/ruleManager/insertRuleOrUpdate",
                onSubmit: function (params) {
                    var boo = $("#form").form("validate");
                    if (!boo) App.unblockUI();
                    return boo;
                },
                success: function (result) {
                    App.unblockUI();
                    result = JSON.parse(result);
                    if (result && result.code == 200) {
                        //加载层
                        layer.alert('提交成功', {
                            icon: 1				// 0 ~ 6 均可填
                        });
                        back();
                    } else {
                        //信息层
                        layer.msg('表单提交失败', {
                            icon: 2				// -1 ~ 6 均可填
                        });
                    }
                },
                error: function (error) {
                    App.unblockUI();
                    //信息层
                    layer.msg('表单提交失败', {
                        icon: 2				// -1 ~ 6 均可填
                    });
                }
            });

            $("#submit").click(function () {
                App.blockUI({
                    boxed: true,
                    message: "处理中..."
                });
                document.getElementById("sqlPreview").value = document.getElementById("showSqlSPL").innerText;
                $("#form").form("submit");
            });

        });

        function back() {
            location.href = backUrl;
        }

        // 下拉框选中事件
        function selectRuleType(domId) {
            // 获取下拉框的dom
            let thatSelect = document.getElementById(domId);
            // 获取选择的索引
            let index = thatSelect.selectedIndex;
            // 获取选中的值
            let valueRuleId = thatSelect.options[index].value;
            axios.post('/qa/ruleManager/getTemplateById', {
                ruleTemplateId: valueRuleId
            }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    /*预览SQl*/
                    document.getElementById("showSqlSPL").innerHTML = resp.data.data.modelSql;
                    document.getElementById("colCheckMsg").value = resp.data.data.modelOutPutName;
                    let sqlRegexp = resp.data.data.sqlRegexp;
                    let json = JSON.parse(sqlRegexp);
                    let ManySpan = document.getElementById("ManySpan");
                    let ManyInput = document.getElementById("ManyInput");
                    if (json.length > 4) {
                        ManySpan.innerText = json[4].name + ":" + json[4].msg;
                        ManyInput.style.display = "block";
                    } else {
                        // 清空值并还原隐藏
                        ManySpan.innerText = "";
                        ManyInput.value = "";
                        ManyInput.style.display = "none";
                    }

                }
            }).catch(error => {
                console.log(error)
            });
        }

        // 选择集群的下拉框
        function selectClusterType(domId) {
            // 获取下拉框的dom
            let thatSelect = document.getElementById(domId);
            // 获取选择的索引
            let index = thatSelect.selectedIndex;
            // 获取选中的文本
            let text = thatSelect.options[index].text;
            // 获取选中的值
            let value = thatSelect.options[index].value;
            axios.post('/qa/ruleManager/getDatabaseByClusterName', {
                clusterName: value
            }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    let listItem = resp.data.data;
                    /*预览刷新级联下拉框数据*/
                    $("#dbType").find('option').remove();
                    // 请选择数据库
                    $("#dbType").append('<option value="">请选择数据库</option>');
                    listItem.forEach((item, index) => {
                        // 更新下拉框数据
                        $("#dbType").append('<option value=' + item.dbName + '>' + item.dbName + '</option>');
                    })
                }
            }).catch(error => {
                console.log(error)
            });
        }

        // 选择数据库的下拉框
        function selectDbType(domId) {
            // 获取数据库集群的下拉框选中
            let thatSelectClusterType = document.getElementById('clusterType');
            let indexClusterType = thatSelectClusterType.selectedIndex;
            let valueClusterType = thatSelectClusterType.options[indexClusterType].value;
            // 当前获取下拉框的dom
            let thatSelect = document.getElementById(domId);
            // 获取选择的索引
            let index = thatSelect.selectedIndex;
            // 获取选中的值
            let value = thatSelect.options[index].value;
            axios.post('/qa/ruleManager/getTableByDatabase', {
                clusterName: valueClusterType,
                dbName: value
            }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    /*预览刷新级联下拉框数据*/
                    let listItem = resp.data.data;
                    /*预览刷新级联下拉框数据*/
                    $("#tableType").find('option').remove();
                    $("#tableType").append('<option value="">请选择表</option>');
                    listItem.forEach((item, index) => {
                        // 更新下拉框数据
                        $("#tableType").append('<option value=' + item.tableName + '>' + item.tableName + '</option>');
                    })
                }
            }).catch(error => {
                console.log(error)
            });
        }

        function selectTableType(domId) {
            let thatSelectClusterType = document.getElementById('clusterType');
            let indexClusterType = thatSelectClusterType.selectedIndex;
            let valueClusterType = thatSelectClusterType.options[indexClusterType].value;
            // 当前获取下拉框的dom
            let thatSelectDB = document.getElementById('dbType');
            // 获取选择的索引
            let indexDb = thatSelectDB.selectedIndex;
            // 获取选中的值
            let valueDB = thatSelectDB.options[indexDb].value;
            // 获取下拉框的dom
            let thatSelect = document.getElementById(domId);
            // 获取选择的索引
            let index = thatSelect.selectedIndex;
            // 获取选中的文本
            let text = thatSelect.options[index].text;
            // 获取选中的值
            let value = thatSelect.options[index].value;
            axios.post('/qa/ruleManager/getColumnByTable', {
                clusterName: valueClusterType,
                dbName: valueDB,
                tableName: value
            }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    /*预览刷新级联下拉框数据*/
                    let listItem = resp.data.data;
                    /*预览刷新级联下拉框数据*/
                    $("#colTtype").find('option').remove();
                    $("#colTtype").append('<option value="">请选择字段</option>');
                    listItem.forEach((item, index) => {
                        // 更新下拉框数据
                        let saveDt = item.fieldName + '(' + item.dataType + ')'
                        $("#colTtype").append('<option value=' + item.fieldName + '>' + saveDt + '</option>');
                    })
                }
            }).catch(error => {
                console.log(error)
            });
        }

        function selectColType(domId) {
            // 获取下拉框的dom
            let thatSelect = document.getElementById(domId);
            // 获取选择的索引
            let index = thatSelect.selectedIndex;
            // 获取选中的值
            let colValue = thatSelect.options[index].value;
            if (colValue == '' || colValue == null) {
                layer.msg("请先选择表字段", {icon: 2, time: 1000, shift: 6});
                return false;
            }
            let thatSelectDB = document.getElementById('dbType');
            let indexDb = thatSelectDB.selectedIndex;
            // 获取选中的值
            let valueDB = thatSelectDB.options[indexDb].value;
            if (valueDB == '' || valueDB == null) {
                layer.msg("请先选择数据库", {icon: 2, time: 1000, shift: 6});
                return false;
            }
            // ====
            let thatSelectTable = document.getElementById('tableType');
            let indexTable = thatSelectTable.selectedIndex;
            // 获取选中的值
            let valueTable = thatSelectTable.options[indexTable].value;
            if (valueTable == '' || valueTable == null) {
                layer.msg("请先选择表", {icon: 2, time: 1000, shift: 6});
                return false;
            }
            let filter = document.getElementById("sqlWhereId").value;
            let innerText = document.getElementById("showSqlSPL").innerText;
            if (filter != null && filter != '') {
                innerText = innerText.replace("${db}.${table}", valueDB + '.' + valueTable).replaceAll("${field}", colValue).replaceAll("${filter}", filter)
            } else {
                innerText = innerText.replace("${db}.${table}", valueDB + '.' + valueTable).replaceAll("${field}", colValue);
            }
            let ManyInput = document.getElementById("ManyInput").value;
            if (ManyInput != null && ManyInput != '') {
                let colName = document.getElementById("ManySpan").innerText;
                colName = colName.split(":")[0];
                innerText = innerText.replace("${" + colName + "}", ManyInput);
            }
            document.getElementById("showSqlSPL").innerText = innerText;
        }

        function changeSqlWhere(modId) {
            let thatValue = document.getElementById(modId).value;
            if (thatValue == null || thatValue == undefined || thatValue == '') {
                return false;
            }
            selectColType('colTtype');
            return true;
        }
    </script>
</div>
<!-- END -->
</body>
</html>